<template>
  <div class="responsive-image-container" :class="{ 'is-loading': isLoading }">
    <img
      :src="src"
      :alt="alt"
      :class="imgClass"
      @load="onImageLoaded"
      loading="lazy"
    />
    <div v-if="isLoading" class="image-placeholder"></div>
  </div>
</template>

<script setup>
const props = defineProps({
  src: {
    type: String,
    required: true,
  },
  alt: {
    type: String,
    default: "",
  },
  imgClass: {
    type: String,
    default: "",
  },
});

const isLoading = ref(true);

function onImageLoaded() {
  isLoading.value = false;
}
</script>

<style scoped>
.responsive-image-container {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.image-placeholder {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    var(--bg-secondary) 25%,
    rgba(var(--border-color-rgb), 0.1) 50%,
    var(--bg-secondary) 75%
  );
  background-size: 200% 100%;
  animation: loading 1.5s infinite;
}

@keyframes loading {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

/* 应用图片过渡 */
.responsive-image-container img {
  transition: opacity 0.3s ease;
}

.is-loading img {
  opacity: 0;
}
</style>
